<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{ dataForm.posterModelId ? "编辑海报模板" : "新增海报模板" }}</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
          >返回</el-button
        >
      </div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="200px"
        :rules="roleRules"
      >
        <el-row>
          <el-form-item prop="modelName" label="模板名称">
            <el-input v-model="dataForm.modelName"></el-input>
          </el-form-item>
          <el-form-item prop="beeperUrlWidth" label="二维码宽">
            <!-- v-maxnum="{ obj: dataForm.company, key: 'phone', zero: true, int: true }" -->
            <el-input
              v-maxnum="{
                obj: dataForm,
                key: 'beeperUrlWidth',
                int: true,
                zero: true
              }"
              v-model="dataForm.beeperUrlWidth"
            ></el-input>
          </el-form-item>
          <el-form-item prop="beeperUrlHeight" label="二维码高">
            <el-input
              v-maxnum="{
                obj: dataForm,
                key: 'beeperUrlHeight',
                int: true,
                zero: true
              }"
              v-model="dataForm.beeperUrlHeight"
            ></el-input>
          </el-form-item>
          <el-form-item prop="beeperUrlX" label="二维码x轴位置">
            <el-input
              type="number"
              v-model.number="dataForm.beeperUrlX"
            ></el-input>
          </el-form-item>
          <el-form-item prop="beeperUrlY" label="二维码y轴位置">
            <el-input
              type="number"
              v-model.number="dataForm.beeperUrlY"
            ></el-input>
          </el-form-item>
          <el-form-item prop="describeSize" label="文字大小">
            <el-input
              v-maxnum="{
                obj: dataForm,
                key: 'describeSize',
                int: true,
                zero: true
              }"
              v-model="dataForm.describeSize"
            ></el-input>
          </el-form-item>
          <el-form-item prop="describeX" label="文字x轴位置">
            <el-input
              type="number"
              v-model.number="dataForm.describeX"
            ></el-input>
          </el-form-item>
          <el-form-item prop="describeY" label="文字y轴位置">
            <el-input
              type="number"
              v-model.number="dataForm.describeY"
            ></el-input>
          </el-form-item>
          <el-form-item prop="backgrounds" label="背景图">
            <upload-img
              class="upload-img"
              @uploadFileList="getImgUrl"
              folder="poster"
            >
              <img
                v-if="dataForm.backgrounds"
                width="100%"
                :src="dataForm.backgrounds"
                alt=""
              />
              <div class="tip" v-if="!dataForm.backgrounds">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将图片拖到此处，或<em>点击上传</em>
                </div>
              </div>
            </upload-img>
          </el-form-item>
        </el-row>
        <div class="tit">
          <h2>海报测试</h2>
        </div>
        <el-row>
          <el-form-item label="测试文字">
            <el-input
              type="textarea"
              v-model="dataForm.describeContent"
              placeholder="请输入测试文字"
            >
            </el-input>
          </el-form-item>
        </el-row>

        <embed
          title="点击下载海报"
          v-if="modelUrl"
          :src="modelUrl"
          style="width:1000px;height:1300px;cursor:pointer"
        />
        <el-row style="text-align: center;">
          <el-button plain type="success" @click="createTestPoster"
            >测试生成海报</el-button
          >
          <el-button plain type="primary" @click="sureClick">保 存</el-button>
          <el-button plain @click="returnList">取 消</el-button>
        </el-row>
      </el-form>


    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import PosterModelApi from "@/api/operation/posterModel";
import UploadImg from "@/components/UploadImg";
export default {
  data() {
    return {
      dataForm: {
        posterModelId: "",
        modelName: "",
        backgrounds: "",
        beeperUrlHeight: "",
        beeperUrlWidth: "",
        beeperUrlX: "",
        beeperUrlY: "",
        describeY: "",
        describeX: "",
        describeSize: "",
        describeContent: ""
      },
      modelUrl: "",
      departList: [],
      loadingIns: false,
      roleRules: {
        modelName: [
          { required: true, message: "请输人模板名称", trigger: "blur" }
        ],
        beeperUrlHeight: [
          { required: true, message: "请输人二维码高", trigger: "blur" }
        ],
        beeperUrlWidth: [
          { required: true, message: "请输入二维码宽", trigger: "blur" }
        ],
        beeperUrlX: [
          { required: true, message: "请输入二维码x轴位置", trigger: "blur" }
        ],
        beeperUrlY: [
          { required: true, message: "请输入二维码y轴位置", trigger: "blur" }
        ],
        describeX: [
          { required: true, message: "请输文字x轴位置", trigger: "blur" }
        ],
        describeY: [
          { required: true, message: "请输入文字y轴位置", trigger: "blur" }
        ],
        describeSize: [
          { required: true, message: "请输入文字大小", trigger: "blur" }
        ],
        backgrounds: [
          { required: true, message: "请上传背景图", trigger: "change" }
        ]
      }

      // sysDepartList:[],
    };
  },
  components: {
    UploadImg
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.$route.query.id) {
        this.dataForm.posterModelId = this.$route.query.id;
        this.getData();
      }
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    getData() {
      PosterModelApi.getPosterModelInfo({
        id: this.dataForm.posterModelId
      }).then(res => {
        this.$Utils.bindingBean(this.dataForm, res.data);
      });
    },
    getImgUrl(val) {
      if (val.length > 0) {
        this.dataForm.backgrounds = val[0];
      }
    },
    async createTestPoster() {
      await this.$refs.dataForm.validate();
      const { describeContent } = this.dataForm;
      if (!describeContent) {
        this.$message.error("请输入测试文字");
      }
      let loading = this.$loading({
					lock: true,
					text: '海报生成中请稍等',
					background: 'rgba(0, 0, 0, 0.7)'
				});
        try{
          const res = await PosterModelApi.createTestPoster(this.dataForm);
          this.modelUrl = res.data
        }finally{
          loading.close()
        }

    },
    sureClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            if (this.dataForm.posterModelId) {
              this.editData();
            } else {
              this.addData();
            }
          });
        }
      });
    },
    addData() {
      let param = {
        modelName: this.dataForm.modelName,
        backgrounds: this.dataForm.backgrounds,
        beeperUrlHeight: this.dataForm.beeperUrlHeight,
        beeperUrlWidth: this.dataForm.beeperUrlWidth,
        beeperUrlX: this.dataForm.beeperUrlX,
        beeperUrlY: this.dataForm.beeperUrlY,
        describeX: this.dataForm.describeX,
        describeY: this.dataForm.describeY,
        describeSize: this.dataForm.describeSize
      };
      PosterModelApi.addPosterModel(param).then(res => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    editData() {
      let param = {
        posterModelId: this.dataForm.posterModelId,
        modelName: this.dataForm.modelName,
        backgrounds: this.dataForm.backgrounds,
        beeperUrlHeight: this.dataForm.beeperUrlHeight,
        beeperUrlWidth: this.dataForm.beeperUrlWidth,
        beeperUrlX: this.dataForm.beeperUrlX,
        beeperUrlY: this.dataForm.beeperUrlY,
        describeX: this.dataForm.describeX,
        describeY: this.dataForm.describeY,
        describeSize: this.dataForm.describeSize
      };
      PosterModelApi.editPosterModel(param).then(() => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({
        path: "/operation/posterModelManagement"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.upload-img {
  &::v-deep .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .tip {
        padding-bottom: 30px;
      }
    }
  }
}
.preview {
  width: 100%;
  min-height: 300px;
  border: 1px solid black;
  .content {
  }
}
</style>
